<template>
  <div class="NavBarWrap">
    <ul>
      <li
        :class="{ activ: '/' + item.path == $route.path }"
        v-for="item in list"
        :key="item.path"
        @click="toPage(item.path)"
      >
        <img :src="'/'+ item.path == $route.path ? item.meta.iconSel : item.meta.icon" alt="" />
        {{ item.meta.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    list() {
      let routes = this.$router.options.routes[0].children;
      routes = routes.filter((item) => !item.meta.hidden); // 过滤掉具有hidden属性的部分
      return routes;
    },
  },
  methods: {
    toPage(path) {
      if (path != this.$route.path) {
        this.$router.push(path);
      }
    },
  },
};
</script>

<style lang='scss'>
.NavBarWrap {
  width: 200px;
  height: calc(100vh - 80px);
  background: rgb(18, 209, 18);
  ul {
    margin: 20px;
    list-style: none;
    padding: 0;
    li {
      margin-top: 10px;
      color: azure;
      cursor: pointer;
      img {
        vertical-align: text-top;
      }
    }
    li:hover {
      color: rgb(204, 229, 16);
    }
    .activ {
      color: rgb(204, 229, 16);
    }
  }
}
</style>